
<!DOCTYPE html>
<html >
  <head>
    <title>首页</title>
    <include file="Public/import_jquery" />
    <include file="Public/head" />
    <link href="__PUBLIC__/wap/css/package_detail.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/swiper.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/webgradients.css" rel="stylesheet" />
    <script src="__PUBLIC__/js/particleground.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
    .swiper-container {
        overflow: visible;
    }
    .swiper-wrapper {
        display: flex;
        align-items: center;
    }
        .swiper-slide {
            text-align: center;
    
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .select-form {
            display: flex;
            justify-content: center;
            overflow: hidden;
        }
        .select-cards {

        }
    </style> 
</head>
  <body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <div class="page page-current" id='router'>
            <header class="bar bar-nav">
                <h1 class='title'>{$webtitle}</h1>
            </header>
            <div class="content">
                <div class="cm-content-nav">
                    <div class="cm-logo-box">
                        <img src="__PUBLIC__/wap/img/cm-logo.png"/>
                        <div class="card">
                            <div class="card-content">
                                <div class="card-content-inner pakage-name-title strong_bliss">
                                    <p>新·全家亲套餐</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card product-card">
                    <div class="card-header color_1">
                        <span>
                                --资费详情--
                        </span>
                    </div>
                    <div class="card-content">
                        <table class="expenses-table ">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th colspan="2">套餐内资费</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="table-info-name">
                                        <ul>
                                            <li>全家亲168</li>
                                            <li>168元</li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>1~3人</li>
                                            <li>国内主叫800分钟</li>
                                            <li>1G国内流量</li>
                                            <li>1G省内流量</li>
                                        </ul>
                                    </td>
                                    <td class="table-info-common" rowspan="3">
                                        <ul>
                                            <li>成员间通话:2000分钟本地</li>
                                            <li>宽带: 带宽200M</li>
                                            <li>收视: 一部尊享版</li>
                                            <li>连续12个月赠送本地共享流量不限量(40G后限速)</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-info-name">
                                        <ul>
                                            <li>全家亲238</li>
                                            <li>238元</li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>1~4人</li>
                                            <li>国内主叫1000分钟</li>
                                            <li>2G国内流量</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="table-info-name">
                                        <ul>
                                            <li>全家亲298</li>
                                            <li>298元</li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul>
                                            <li>1~6人</li>
                                            <li>国内主叫1200分钟</li>
                                            <li>3G国内流量</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>
                                        <ul>
                                            <li>套餐超出</li>
                                            <li>及</li>
                                            <li>其他业务</li>
                                        </ul>
                                    </td>
                                    <td colspan="2">
                                        <ul>
                                            <li>
                                                套餐外语音：
                                                国内主叫0.19元/分钟，被叫全国免费
                                            </li>
                                            <li>
                                                套餐外流量资费：
                                                0.29元/M
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="card product-card">
                        <div class="card-header color_2">
                            <span>
                                    --在线预约--
                            </span>
                        </div>
                        <div class="card-content">
                            <div class="select-form">
                                <div class="select-cards">
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide" data-text="全家亲168" data-id="0">
                                                <div class="card lady_lips">
                                                    <div class="card-content">
                                                        <div class="card-content-inner">
                                                            <p>全家亲168</p>
                                                            <p>168元</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide" data-text="全家亲238" data-id="1">
                                                <div class="card night_fade">
                                                    <div class="card-content">
                                                        <div class="card-content-inner">
                                                            <p>全家亲238</p>
                                                            <p>238元</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide" data-text="全家亲298" data-id="2">
                                                <div class="card deep_relief">
                                                    <div class="card-content">
                                                        <div class="card-content-inner">
                                                            <p>全家亲298</p>
                                                            <p>298元</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Add Pagination -->
                                    </div>
                                </div>
                            </div>
                            <div class="list-block">
                                <ul>
                                <li>
                                    <a href="#" id="public_type_name" class="item-link list-button" data-id="0">全家亲238</a></li>
                                </ul>
                            </div>
                            <div class="content-block chose-card">
                                <p>
                                    <a href="#" class="button button-fill "> 选择套餐 </a>
                                </p>
                            </div>
                        </div>
                    </div>

                <div class="card product-card">
                    <div class="card-header color_3">
                        <span>
                                --温馨提示--
                        </span>
                    </div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            <div class="list-block">
                                <ul>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text"> 
                                            <span>1、</span>优家20M/50M/100M等高带宽套餐,仅限FTTH能力达标小区办理；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>2、</span>
                                                优家套餐赠送的话费不能抵扣流量费或溢出流量费用；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>3、</span>
                                                优家套餐赠送话费不能抵扣通信账户支付、优家套餐费；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>4、</span>
                                                优家套餐赠送话费限当月有效；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>5、</span>
                                                办理范围：成都移动全球通、动感地带、神州行客户（不含神州行亲情卡、贺岁卡）；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>6、</span>
                                                客户申请办理优家套餐后须承诺12个月不能退出套餐；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>7、</span>
                                                办理优家套餐后，优家套餐次月生效，家庭账户生效后，所有费用均由主付费人统一支付，家庭账户付费方式为预付费；</div>
                                        </div>
                                    </li>
                                    <li class="item-content">
                                        <div class="item-inner">
                                            <div class="item-text">
                                                <span>8、</span>
                                                优家108及108以上套餐客户需先开通合家欢业务，但可享受合家欢业务功能费返还（合家欢业务功能费月初扣取，月末返还。优家套餐生效前开通合家欢业务扣取的功能费不予返还）；</div>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	jquery('.cm-content-nav').particleground({
		dotColor: 'rgba(255,255,255,0.5)',
		lineColor: 'rgba(255,255,255,0.7)',
		parallaxMultiplier:5,
		lineWidth:0.1,
		dotSize:2,
		density:1500,
		particleRadius:3,
		proximity:100,
		parallaxMultiplier:15,
	});
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 0,
        on: {
            slideChangeTransitionEnd: function(){
            //你的事件
            const { activeIndex, slides } = this
            const seletcCard = jquery(slides[activeIndex])
            const text = seletcCard.data('text')
            const id = seletcCard.data('id')
            $('#public_type_name').text(text).data('id', id)
            },
        },
    });
</script>
    <include file="Public/footer" />
  </body>
</html>